<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 事件绑定由两种写法，一种不加括号，一种加上括号。  但是要想获得事件对象，就需要在括号的参数里面加上$event参数，这样就能获取事件对象 -->
        <!-- <button @click="handleClick">Button</button> -->
        <!-- 通过()不仅可以获得当前事件对象，还可以获得传递过来的参数 -->
        <button @click="handleClick($event,1,2,3)">Button</button>


        <!-- 事件修饰符之 阻止默认行为 .prevent 相当于原生js中的preventDefault-->
        <form action="/app.html" @click.prevent>
            <!-- 默认情况下我们点击提交会跳转到app.html，但是如果我们不想跳转，就需要添加阻止默认行为修饰符 -->
            <input type="submit" />
        </form>

        <!-- 事件修饰符之 阻止冒泡行为.stop 相当于原生JS中的stopPropagation -->
        <!-- .self代表只有点击自身才会触发自己的事件，也可以用来阻止冒泡 -->
        <!-- .once代表事件只会触发一次 -->
        <div @click.self.once="handle">
            self
            <!-- 当我点击hello时，触发了父元素的点击事件，这就是冒泡。  -->
            <div>hello</div>
        </div>


        <!-- 事件冒泡与事件捕获(.capture)的区别:事件冒泡是从内向外：inner--outer，而事件捕获是从外向内：outer-inner -->
        <div @click.capture="handle">
            <div @click.capture="handle2">hello</div>
        </div>

        <!-- 按键修饰符 -->
        <!-- 按下enter键时，触发handleKeyDown事件 -->
        <input @keydown.enter="handleKeyDown" />

        <!-- 鼠标按键修饰符 .right:鼠标右键点击触发 .left：鼠标左键点击 .middle：鼠标中键点击-->
        <div @click.middle="handleClick2">click</div>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                handleClick: function (e, one, two, three) {
                    console.log(e, one, two, three);
                },
                handle: function () {
                    alert("outer")
                },
                handle2: function () {
                    alert("inner")
                },
                handleKeyDown: function (e) {
                    // e.target：获取当前事件的对象，回车后打印文本框里的内容
                    console.log(e.target.value);
                },
                handleClick2: function () {
                    alert("鼠标点击事件")
                }
            },

        })
    </script>
</body>

</html>